<template>
  <a-modal v-model:visible="visible" width="70%" :mask-closable="false" @ok="save" @cancel="close"  style="transform: scale(1.3)">
    <template #title>
      <span style="font-size: 24px">{{ areaNname }}</span>
    </template>
    <a-descriptions :column="1" :label-style="{ width: '200px' }" :value-style="{ height: '80px' }">
      <a-descriptions-item label="区域点位数量:">
        <div style="border-bottom: 3px solid #ccc">
          <span style="font-size: 30px; font-weight: 500; color: #cf0303">{{ areaPointData.areaPoints_number }}</span>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="设置条桶数量:">
        <a-select size="large" v-model.trim="areaPointData.areaPoint_set" value-key="value">
          <a-option v-for="item of numberOptions" style="zoom: 2" :value="item.value" :label="item.label" />
        </a-select>
      </a-descriptions-item>
    </a-descriptions>
    <template #footer>
      <div class="footer">
        <a-button @click="close" style="width: 48%; height: 50px; font-size: 28px; color: #fff; background-color: #ccc">取消</a-button>
        <a-button type="primary" @click="save" style="width: 48%; height: 50px; font-size: 28px">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../../store/main/main'
const mainStore = useMainStore()
const areaPointData = ref({
  areaPoints_number: '满桶区',
  areaPoint_set: 1
})
const areaNname = ref('')
const area = ref()
const visible = ref(false)
const numberOptions = ref()
function setAreaPointModalVisible(item, index) {
  area.value = item
  areaNname.value = item.area_name
  let count = 0
  item.point.forEach((element) => {
    if (element.pstatus_point != '无桶') {
      count++
    }
  })
  areaPointData.value.areaPoints_number = count + '/' + '总配置数' + item.point.length
  if (index == 0) {
    areaPointData.value.areaPoint_set = 0
  } else {
    areaPointData.value.areaPoint_set = index
  }

  const arr = []
  for (let i = 0; i <= item.point.length; i++) {
    arr.push({ label: i.toString(), value: i })
  }
  numberOptions.value = arr
  visible.value = true
}
const save = () => {
  mainStore.getAreaPointEdit(Object.assign({}, area.value, areaPointData.value)).then(() => {
    Message.success('编辑成功')
    visible.value = false
  })
}
const close = () => {
  mainStore.getAreaList()
  visible.value = false
}
defineExpose({ setAreaPointModalVisible })
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  color: #121314;
  font-size: 26px;
}
:deep(.arco-select-view-single.arco-select-view-size-large .arco-select-view-value) {
  font-size: 26px;
  font-weight: 500;
  color: #cf0303;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.openClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.prohibitClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: none;
  border-radius: 5px;
  background-color: #cf0303;
  color: #fff;
}
.openClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.prohibitClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.openClick-bucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.openbucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</style>
